<template>
  <div class="app">
    <h2>Vue路由测试</h2>
    <!-- 导航区 -->
     <div class="navigator">
      <RouterLink to="/home" active-class="active">首页</RouterLink>
      <RouterLink to="/news" active-class="active">新闻</RouterLink>
      <RouterLink to="/count" active-class="active">求和</RouterLink>
      <RouterLink to="/about" active-class="active">关于</RouterLink>
     </div>
     <!-- 展示区 -->
      <div class="main-content">
        <routerView></routerView>
      </div>
  </div>
</template>
<script setup lang="ts" name="App">
import { RouterLink } from 'vue-router';


</script>


<style scoped>
.main-content {
  width: 100%;
  height: 500px;
  border: 2px solid #ddd;
  border-radius: 4px;
}
.active {
  font-size: 20px;
  color: red;
}
</style>
